<template>
  <view class="login-wrap">
    <div class="login-form">
      <div class="logo">
        <image src="../../static/index/actove.png" mode=""></image>
      </div>
      <view class="name">游客你好,请您登录平台</view>
      <div class="login-button">
        <button @click="getMyInfo" class="shouquan">手机号快捷登录</button>
      </div>
      <view class="xieyi">
        <checkbox-group @change="checkboxChange">
          <checkbox
            value="agree"
            color="#0095F8"
            style="transform: scale(0.7)"
            :checked="checked" />
          我已阅读且同意小程序
          <span style="color: #0095f8" @click="toDetail(4)">《隐私政策》</span>
          和
          <span style="color: #0095f8" @click="toDetail(3)">《用户协议》</span>
        </checkbox-group>
      </view>
    </div>

    <!-- <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog mode="base" @close="close" @confirm="confirm"> -->
    <!-- <div class="sqdl">
      <image
        v-if="formData.avatar"
        :src="formData.avatar"
        mode="widthFix"></image>
      <image v-else src="../../static/index/actove.png" mode="widthFix"></image>
      <button @click="getMyInfo">点击获取头像</button>
      <input
        type="nickname"
        maxlength="20"
        v-model="formData.username"
        placeholder="点击获取昵称"
        @change="handleChange" />
    </div> -->
    <!-- </uni-popup-dialog>
    </uni-popup> -->
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      hasUserInfo: false,
      agree: "1",
      loginInfo: {},
      myUserInfo: {},
      checked: false,
      formData: {
        username: "",
        avatar: "",
      },
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad() {},
  methods: {
    getMyInfo(e) {
      if (this.checked == false) {
        return uni.showToast({
          title: "请同意相关协议",
          icon: "none",
        });
      }
      wx.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户信息的目的
        success: (res) => {
          console.log("用户信息:", res.userInfo);
          this.userInfo.nickName = res.userInfo.nickName;
          this.userInfo.avatarUrl = res.userInfo.avatarUrl;
          // this.login(res);
          this.login();
        },
        fail: (err) => {
          console.error("获取用户信息失败:", err);
        },
      });
    },
    // // 登录并获取 code
    // login(userInfo) {
    //   wx.login({
    //     success: (res) => {
    //       if (res.code) {
    //         console.log("登录成功，code:", res.code);
    //         // 将 code 和用户信息发送到服务器
    //         this.sendCodeToServer(res.code, userInfo);
    //       } else {
    //         console.error("登录失败:", res.errMsg);
    //       }
    //     },
    //     fail: (err) => {
    //       console.error("登录失败:", err);
    //     },
    //   });
    // },

    // // 将 code 和用户信息发送到服务器
    // sendCodeToServer(code, userInfo) {
    //   // 这里调用你的后端接口，将 code 和用户信息发送到服务器
    //   // 例如：
    //   uni.request({
    //     url: "https://your-server.com/login",
    //     method: "POST",
    //     data: {
    //       code: code,
    //       nickName: userInfo.nickName,
    //       avatarUrl: userInfo.avatarUrl,
    //     },
    //     success: (res) => {
    //       console.log("服务器返回:", res.data);
    //       // 处理服务器返回的数据，例如保存 token 等
    //     },
    //     fail: (err) => {
    //       console.error("请求服务器失败:", err);
    //     },
    //   });
    // },
    checkboxChange(e) {
      if (e.detail.value.length == 0) {
        this.checked = false;
      } else {
        this.checked = true;
      }
    },
    // 获取手机号授权
    getPhoneNumber(e) {
      if (this.checked) {
        console.log(e.detail.code); // 动态令牌
        console.log(e.detail.errMsg); // 回调信息（成功失败都会返回）
        console.log(e.detail.errno); // 错误码（失败时返回）
        if (e.detail.errno == "104") {
          uni.showToast({
            title: "同意才能授权登录！",
            icon: "none",
            duration: 3000,
          });
          return false;
        }
        // e.detail.errMsg 两种不同的返回结果 是不同机型的缘故
        if (
          e.detail.errMsg == "getPhoneNumber:fail user deny" ||
          e.detail.errMsg == "getPhoneNumber:fail:user deny"
        ) {
          return;
        }
        uni.showLoading({
          mask: true,
        });
        const jsCode = e.detail.code;
        if (jsCode == undefined || jsCode == null || jsCode == "") {
          uni.showToast({
            title: "授权登录失败，请使用验证码登录！",
            icon: "none",
            duration: 3000,
          });
          return false;
        }
        this.login(jsCode);
      } else {
        uni.showToast({
          title: "请同意相关协议",
          icon: "none",
        });
      }
    },
    // 登录并获取用户信息
    login(jsCode) {
      uni.login({
        provider: "weixin",
        success: (loginRes) => {
          // 登录成功，获取用户code
          const { code } = loginRes;
          // 发送code到后台换取openId, sessionKey, unionId
          uni.request({
            url: "https://house.xiaogangjt.com/api/user/wxlogin", // 你的登录API地址
            method: "POST",
            data: {
              code,
              phone_code: jsCode,
            },
            success: (res) => {
              console.log(res, "ressddaataa");
              uni.hideLoading();
              if (res.data.code === 1) {
                // 将用户信息和session存储到本地
                uni.setStorageSync("userInfo", res.data.data.userinfo);

                uni.switchTab({
                  url: "/pages/index/index",
                });
              } else {
                uni.showToast({
                  title: "登录失败",
                  icon: "none",
                });
              }
            },
            fail: () => {
              uni.showToast({
                title: "请求失败",
                icon: "none",
              });
            },
          });
        },
        fail: (err) => {
          console.log(
            "uni.login 接口调用失败，将无法正常使用开放接口等服务",
            err
          );
          uni.showToast({
            title: "登录失败",
            icon: "none",
          });
        },
      });
    },
    getUserProfile(e) {
      // console.log(e, 'eeesssaa');
      this.formData.avatar = e.detail.avatarUrl;
    },
    handleChange(e) {
      // console.log(e, 'eeesssaa');
      this.formData.username = e.detail.value.trim();
    },

    toDetail(type) {
      uni.navigateTo({
        url: "/pages/agreement/index?id=" + type,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-wrap {
  width: 100%;
  height: 100vh;
  background-color: #f8f8f8;
  .name {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #000000;
    line-height: 48rpx;
    text-align: center;
    margin-bottom: 50rpx;
  }
  .login-form {
    width: 100%;
    height: 100vh;
    // height: 812px;
    background-size: 100% 100%;
    // background: url("/static/logobg.jpg") no-repeat center;
    .logo {
      width: 100px;
      margin: 0 auto;
      padding: 100px 0 16px 0;
      text-align: center;
      image {
        width: 64px;
        height: 64px;
      }
      p {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #054187;
        line-height: 33px;
      }
    }
    .login-button {
      .shouquan {
        width: 294rpx;
        height: 47px;
        background: #0095f8;
        box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.5);
        border-radius: 22px;
        text-align: center;
        line-height: 47px;
        font-weight: 500;
        font-size: 15px;
        color: #ffffff;
        margin: 0 auto 16px auto;
      }
      .quxiao {
        width: 311px;
        height: 47px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.05);
        border-radius: 25px;
        font-weight: 400;
        font-size: 15px;
        color: #5d87b4;
        line-height: 47px;
        text-align: center;
        margin: 0 auto;
      }
    }
    .xieyi {
      padding-top: 16px;
      text-align: center;
      color: #666666;
      font-size: 13px;
    }
  }
  .sqdl {
    margin: auto;
    image {
      width: 60px;
      height: 60px;
      border-radius: 60px;
      display: block;
      margin: 10px auto;
    }
    input {
      border: 1px solid #eee;
      padding: 10px;
      margin: 10px auto;
    }
    // button{
    // 	width: 60px;
    // 	height: 60px;
    // }
  }
}
</style>
